<template>
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>糖尿病合并症</span>
        <div class="line" style="width:96px;"></div>
      </div>

      <div class="content_box">
        <div class="card_content" v-if="report.hypertensionText !== null && report.hypertensionText !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">高血压病</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div class="item">确诊日期：{{ report.hypertensionDate }}</div>
          <div>
            <a-row>
              <a-col class="item" :span="24">{{ report.hypertensionData.split(',')[0] }}</a-col>
              <a-col class="item" :span="24">{{ report.hypertensionData.split(',')[1] }}</a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.hyperlipidemiaText !== null && report.hyperlipidemiaText !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">高脂血症</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div class="item">确诊日期：{{ report.hypertriglyceridemiaDate }}</div>
          <div>
            <a-row>
              <a-col class="item" :span="24">{{ report.ifHypolipidemic1 }}</a-col>
            </a-row>
          </div>
        </div>
        <!-- <div class="card_content" v-if="report.hyperlipidemiaText !== null&&report.other !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">高胆固醇血症</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div class="item">确诊日期：{{ report.hypercholesterolemiaDate }}</div>
          <div>
            <a-row>
              <a-col class="item" :span="12">{{ report.ifHypolipidemic2 }}</a-col>
            </a-row>
          </div>
        </div> -->
        <div class="card_content" v-if="report.angiocardiopathyText !== null && report.angiocardiopathyText !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">心血管疾病</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div class="item">确诊日期：{{ report.angiocardiopathyDate }}</div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-for="item in report.angiocardiopathyExam.split(';')" :key="item">{{
                item
              }}</a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.cerebrovascularText !== null && report.cerebrovascularText !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">脑血管疾病</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div>
            <a-row>
              <a-col class="item">脑卒中类型： {{ report.strokeType }}</a-col>
              <a-col class="item" v-if="report.strokeDate !== null && report.strokeDate !== '——'"
                >脑卒中确诊日期： {{ report.strokeDate }}</a-col
              >
              <a-col class="item" v-if="report.ischemiaDate !== null && report.ischemiaDate !== '——'"
                >急性脑缺血确诊日期： {{ report.ischemiaDate }}</a-col
              >
              <a-col class="item" v-if="report.transientIschemiaDate !== null && report.transientIschemiaDate !== '——'">
                短暂性脑缺血发作确诊日期： {{ report.transientIschemiaDate }}
              </a-col>
              <a-col class="item" v-if="report.ccvdDate !== null && report.ccvdDate !== '——'"
                >动脉粥样硬化性CCVD确诊日期： {{ report.ccvdDate }}</a-col
              >
              <a-col class="item">其他脑血管疾病： {{ report.cerebrovascularOther }}</a-col>
              <a-col class="item">脑血管疾病相关检查： {{ report.cerebrovascularCheck }}</a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.peripheralText !== null && report.peripheralText !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">周围血管疾病</span>
            <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
          </div>
          <div>
            <a-row>
              <a-col class="item" v-if="report.arteryDate !== null && report.arteryDate !== '——'"
                >外周动脉疾病确诊日期： {{ report.arteryDate }}</a-col
              >
              <a-col class="item" v-if="report.aneurysmDate !== null && report.aneurysmDate !== '——'"
                >动脉瘤确诊日期： {{ report.aneurysmDate }}</a-col
              >
              <a-col class="item" v-if="report.fistulaDate !== null && report.fistulaDate !== '——'"
                >动静脉瘘确诊日期： {{ report.fistulaDate }}</a-col
              >
              <a-col class="item" v-if="report.venousDate !== null && report.venousDate !== '——'"
                >外周静脉疾病确诊日期： {{ report.venousDate }}</a-col
              >
              <!-- <a-col class="item" v-if="report.injuryDate !== null&&report.other !== '——'"
                >周围血管损伤确诊日期： {{ report.injuryDate }}</a-col
              > -->
              <a-col class="item">所患疾病类型： {{ report.peripheralType }}</a-col>
            </a-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Comorbidity',
  props: ['report'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }

@media print {
  .container {
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  column-count: 2;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}
// .left_box {
//   width: 45%;
//   display: flex;
//   flex-direction: column;
// }
// .right_box {
//   width: 45%;
//   display: flex;
//   flex-direction: column;
// }
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
</style>

